import { ReactNode } from "react";

interface SectionProps {
  title?: string;
  description?: string;
  children: ReactNode;
  className?: string;
  background?: "white" | "gray" | "blue";
  centered?: boolean;
  id?: string;
}

export default function Section({
  title,
  description,
  children,
  className = "",
  background = "white",
  centered = false,
  id,
}: SectionProps) {
  // 背景样式
  const bgStyles = {
    white: "bg-white",
    gray: "bg-gray-50",
    blue: "bg-blue-600 text-white",
  };

  // 基础样式
  const baseStyles = "py-16";
  
  // 组合样式
  const combinedStyles = `${baseStyles} ${bgStyles[background]} ${className}`;

  return (
    <section className={combinedStyles} id={id}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {(title || description) && (
          <div className={`${centered ? "text-center" : ""} mb-12`}>
            {title && (
              <h2 className={`text-3xl font-bold ${background === "blue" ? "text-white" : "text-gray-900"} mb-4`}>
                {title}
              </h2>
            )}
            {description && (
              <p className={`text-lg ${background === "blue" ? "text-blue-100" : "text-gray-600"} max-w-3xl ${centered ? "mx-auto" : ""}`}>
                {description}
              </p>
            )}
          </div>
        )}
        {children}
      </div>
    </section>
  );
} 